<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" type="text/css" href="__CSS__/layui.css">
    <link rel="stylesheet" href="__CSS__/common.css" />
    <link rel="stylesheet" href="__CSS__/page.css" />
    <script src="/template/default/static/layui.js"></script>
    <style>
        html{width:100%; height: 100%;}
        body{width:100%; height: 100%;}
        .register-box{width:300px; height: auto; position: fixed; top:50%; left:50%; margin-left:-150px; margin-top:-115px;}
        .layui-input-block{margin-left:0px;}
        .layui-input:hover, .layui-textarea:hover,.layui-input:focus,.layui-textarea:focus{border-color:#75B6FD !important;}
        .layui-form-checkbox[lay-skin=primary]:hover i{border-color:#75B6FD;}
        .layui-form-checked[lay-skin=primary] i{background-color:#75B6FD; }
        .layui-btn{background-color:#75B6FD; }
        .layui-form-mid{padding:0; margin-right: 0; margin-left:4px;}
        .layui-form-mid img{height: 38px;}
    </style>
</head>
<body>
<div class="header">
    <div class="container">
        <div class="logo">
            <img src="/public/static/member/img/logo.png" alt="">
        </div>
        <!--<div class="tool">-->
            <!--<div class="breadcrumb">-->
                <!--<ul>-->
                    <!--<li>-->
                        <!--<p>-->
                            <!--<b>深圳</b>-->
                            <!--<a href="javascript:;">更换</a>-->
                        <!--</p>-->
                        <!--<p>七日天气</p>-->
                    <!--</li>-->
                    <!--<li>-->
                        <!--<img src="/public/static/member/img/today.png">-->
                        <!--<p>-->
                            <!--<b>深圳</b>-->
                        <!--</p>-->
                        <!--<p style="padding-left: 34px;">31C ~ 21C</p>-->
                    <!--</li>-->
                    <!--<li>-->
                        <!--<img src="/public/static/member/img/today.png">-->
                        <!--<p>-->
                            <!--<b>深圳</b>-->
                        <!--</p>-->
                        <!--<p style="padding-left: 34px;">31C ~ 21C</p>-->
                    <!--</li>-->
                    <!--<li>-->
                        <!--<p>-->
                            <!--<span>08月20日</span>-->
                            <!--<span>星期四</span>-->
                        <!--</p>-->
                        <!--<p>七月初七</p>-->
                    <!--</li>-->
                <!--</ul>-->
            <!--</div>-->
        <!--</div>-->
    </div>
</div>
    <div class="register-box">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <!--<label class="layui-form-label">输入框</label>-->
                <div class="layui-input-block">
                    <input type="text" name="email" required  lay-verify="required|email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <!--<label class="layui-form-label">密码框</label>-->
                <div class="layui-input-block">
                    <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <!--<label class="layui-form-label">密码框</label>-->
                <div class="layui-input-block">
                    <input type="password" name="repassword" required lay-verify="required" placeholder="重复密码" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <!--<label class="layui-form-label">密码框</label>-->
                <div class="layui-input-block">
                    <input type="text" name="captcha" required lay-verify="required" placeholder="验证码" autocomplete="off" class="layui-input" style="width:150px; float:left;">
                    <div class="layui-form-mid layui-word-aux"><img src="{:captcha_src()}" class="pull-right" id="captcha" style="cursor: pointer;" onclick="this.src='{:captcha_src()}?d='+Math.random();" title="点击刷新" alt="captcha" /></div>
                </div>

            </div>

            <div class="layui-form-item">
                <!--<label class="layui-form-label">复选框</label>-->
                <div class="layui-input-inline" style="width:auto;">
                    <input type="checkbox" name="treaty" title="" lay-filter="treaty" value="1" lay-skin="primary" >
                </div>
                <div class="layui-form-mid layui-word-aux" style="margin-top:8px;"><a href="#">注册条款</a> </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block" style="text-align: center;">
                    <button class="layui-btn" lay-submit lay-filter="registerSubmit">立即注册</button>
                </div>
            </div>
        </form>

        <script>

            //Demo
            layui.use('form', function(){
                var form = layui.form();
                var tk = false;
                form.on('checkbox(treaty)', function(data){
                    console.log(data.elem.checked); //是否被选中，true或者false
                    if(data.elem.checked)
                    {
                        tk = true;
                    }else{
                        tk = false;
                    }
                });
                //监听提交
                form.on('submit(registerSubmit)', function(data){
                    if(!tk)
                    {
                        layer.msg('请先阅读注册条款');
                    }
                    return false;
                });
            });
        </script>
    </div>
</body>
</html>